<template>
  <view class="main">
    <u-navbar title="采掘预警" :title-bold="true" title-color="#000"></u-navbar>
    <searchcom @searchList="searchList"></searchcom>
    <u-tabs-swiper ref="uTabs" font-size="26" :list="titleList" :current="current" @change="tabsChange"
      :is-scroll="false"></u-tabs-swiper>
    <swiper :current="swiperCurrent" @animationfinish="animationfinish" class="u-flex-1 u-p-20">
      <swiper-item class="swiper-item">
        <scrolllist :listData="listData" :swiperCurrent="swiperCurrent" :customerId="searchData.customerCode"
          :customerStr="searchData.customerStr" :countyStr="searchData.countyStr"></scrolllist>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scrolllist :listData="listData" :swiperCurrent="swiperCurrent" :customerId="searchData.customerCode"
          :customerStr="searchData.customerStr" :countyStr="searchData.countyStr"></scrolllist>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import scrolllist from './scrollList.vue'
import searchcom from './searchCommon.vue'
export default {
  components: { scrolllist, searchcom },
  data() {
    return {
      searchData: {
        customerStr: '',
        customerNo: '',
        customerName: '',
        warnType: '',
        customerCode: ''
      },
      isCity: true,
      countyShow: false,
      mineShow: false,
      countyList: [],
      mineList: [],
      titleList: [
        { id: 1, name: '实时' },
        { id: 2, name: '已结束' }
      ],
      swiperCurrent: 0,
      current: 0,
      listData: {}
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    searchList(e) {
      this.searchData = e
      this.getData()
    },
    async getData() {
      const { customerCode } = this.searchData
      let url = '/excavation/alarm1/miningWarning'
      const { body } = await this.$get(`${url}?customerId=${customerCode}&&status=${this.swiperCurrent}`)
      if (body) {
        this.listData = body
      }
    },

    tabsChange(index) {
      this.swiperCurrent = index
      this.current = this.swiperCurrent
    },
    transition(e) {
      // let dx = e.detail.dx
      // this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.swiperCurrent = e.detail.current
      this.current = this.swiperCurrent
    },
  },
  watch: {
    //监视swiper，发生改变才调用接口（在animationfinish里调用上划会调用）
    swiperCurrent(e) {
      this.getData()
    }
  }
}
</script >

<style lang="scss" scoped></style>